<script setup>
import { onMounted, ref } from 'vue';
import { getTaskList } from '../../../apis/task';
import { showFailToast } from '../../../utils';

  const page = ref(1)
  const size = ref(5)
  const status = ref(1)
  const list = ref([])

  const isLoading = ref(false)


  const getPickupList = async () => {
     getTaskList(status.value,page.value,size.value,res => {
      if(res.code === 200){
        for(let i=0;i < res.data.items.length;i++){
          list.value.push(res.data.items[i])
        }
        isLoading.value = false
        console.log('isLoading',isLoading.value);
      }else{
        showFailToast('获取任务列表失败')
      }
    })
  }
  const refreshCallback = () => {
    isLoading.value = true
    page.value=1;
    list.value=[];
    getPickupList()
  }

onMounted(() => {
  getPickupList()
})
</script>

<template>
  <scroll-view scroll-y refresher-enabled class="scroll-view"
      @scrolltolower="++page;getPickupList()"
      @refresherrefresh="refreshCallback"
      :refresher-triggered="isLoading">
    <view class="scroll-view-wrapper">
      <view v-for="task in list" :key="task.driverId" class="task-card">
        <navigator hover-class="none" :url="`/subpkg_task/detail/index?id=${task.id}`">
          <view class="header">
            <text class="no">任务编号: {{task.transportTaskId}}</text>
            <text class="status">已延迟</text>
          </view>
          <view class="body">
            <view class="timeline">
              <view class="line"
                >{{task.startAddress}}</view
              >
              <view class="line">{{task.endAddress}}</view>
            </view>
          </view>
        </navigator>
        <view class="footer">
          <view class="label">提货时间</view>
          <view class="time">{{task.planDepartureTime}}</view>
          <navigator
            v-if="!task.enablePickUp"
            hover-class="none"
            :url="`/subpkg_task/pickup/index?id=${task.id}`"
            class="action"
            >提货</navigator
          >
          <button v-else disabled hover-class="none" style="color: #FFF;" class="action disabled">提货</button>
        </view>
      </view>

      <view v-if="list.value === 0" class="task-blank">无待提货物</view>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
  @import './styles.scss';
</style>
